<!DOCTYPE html>
<html>
<head>

    <style type="text/css">

        html, body {
            width: 100%;
            height: 100%;
        }

        .box-layout {
            display: -webkit-box;
            position: relative;
            padding: 0;
            margin: 0;
        }

        .box-element {
            display: -webkit-box;
        }

        .box-layout-orient-horizontal {
            -webkit-box-orient: horizontal;
        }

        .box-layout-orient-vertical {
            -webkit-box-orient: vertical;
        }

        .box-element-flex-0 {
            -webkit-box-flex: 0;
        }

        .box-element-flex-1 {
            -webkit-box-flex: 1.0;
        }

    </style>

</head>
<body class="box-layout">
<button id="a" class="box-element box-element-flex-0"></button>
<div id="middle" class="box-element box-element-flex-1">
    <button id="b1" class="box-element box-element-flex-0">B1</button>
    <button id="b2" class="box-element box-element-flex-1">B2</button>
    <button id="b3" class="box-element box-element-flex-0">B3</button>
</div>
<button id="c" class="box-element box-element-flex-0"></button>
<script>
</script>


</body>
</html>
